import React, { Component } from 'react';
import { Card, Form, Input, InputNumber, Button } from 'antd';

import './commodity-add.css';

export default class commodityAdd extends Component {
  render() {
    return (
      <div className="commodity-add-container">
        <Card className="commodity-add-card" title="Default size card">
          <Form name="nest-messages" onFinish={null} validateMessages={null}>
            <Form.Item
              name={['user', 'name']}
              label="Name"
              rules={[{ required: true }]}
            >
              <Input />
            </Form.Item>
            <Form.Item
              name={['user', 'email']}
              label="Email"
              rules={[{ type: 'email' }]}
            >
              <Input />
            </Form.Item>
            <Form.Item
              name={['user', 'age']}
              label="Age"
              rules={[{ type: 'number', min: 0, max: 99 }]}
            >
              <InputNumber />
            </Form.Item>
            <Form.Item name={['user', 'website']} label="Website">
              <Input />
            </Form.Item>
            <Form.Item name={['user', 'introduction']} label="Introduction">
              <Input.TextArea />
            </Form.Item>
            <Form.Item>
              <Button type="primary" htmlType="submit">
                Submit
              </Button>
            </Form.Item>
          </Form>
        </Card>
      </div>
    );
  }
}
